<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OAuth2单点登录</title>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .row-center {
            text-align: center;
            margin-top: 120px;
        }

        .col-center {
            display: inline-block;
            float: none;
            text-align: left;
        }

        .sso-form {
            margin-top: 10px;
            width: 300px
        }
    </style>
</head>
<body>
<input type="hidden" th:value="${errorMsg}" id="errorMsg"/>
<input type="hidden" th:value="${loginType}" id="loginType"/>
<input type="hidden" th:value="${username}" id="username"/>
<div class="container" id="ssoLogin">
    <div class="row row-center" style="height: 500px;">
        <div class="col-center">
            <div>
                <p>OAuth2单点登录</p>
                <ul class="nav nav-tabs">
                    <li v-bind:class="{ active: userPasswordVisible }"><a href="#" @click.prevent="showUserPassword">账号密码</a>
                    </li>
                    <li v-bind:class="{ active: phoneSmsCodeVisible }"><a href="#" @click.prevent="showPhoneSmsCode">短信登录</a>
                    </li>
                    <li v-bind:class="{ active: qrCodeVisible }"><a href="#" @click.prevent="showQrCode">扫码登录</a></li>
                </ul>
            </div>
            <div v-show="errorVisible" style="margin-top: 10px;color: red">{{errorMsg}}</div>
            <div v-show="userPasswordVisible" class="sso-form">
                <form id="login" action="" method="post">
                    <div class="form-group">
                        <div class="input-group">
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-user"></span>
                        </span>
                            <input type="text" name="username" v-model="username" class="form-control"
                                   placeholder="用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group" style="text-align: left">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-lock"></span>
                            </span>
                            <input type="password" name="password" v-model="password" class="form-control"
                                   placeholder="密码">
                        </div>
                    </div>
                    <!--下面是记住我输入框-->
                    <div class="checkbox">
                        <label>
                            <input v-model="rememberMe" type="checkbox" name="rememberMe" :value="rememberMe"/>记住我
                        </label>
                    </div>
                    <input type="hidden" v-model="loginType" name="loginType"/>
                    <button type="button" class="btn btn-primary" @click="login">登录</button>
                </form>
            </div>
            <div v-show="phoneSmsCodeVisible" class="sso-form">
                <form id="smsLogin" method="post">
                    <div class="form-group">
                        <div class="input-group">
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-user"></span>
                        </span>
                            <input type="text" name="username" v-model="phone" class="form-control" placeholder="手机号">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group" style="text-align: left">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-eye-open"></span>
                            </span>
                            <input type="text" name="password" class="form-control" placeholder="验证码"
                                   v-model="codeValue">
                            <span class="input-group-btn">
                            <button class="btn btn-default btn-block" style="width: 80px" type="button" @click="sendMsg"
                                    :disabled="codeDisabled">{{codeButton}}</button>
                        </span>
                        </div>
                    </div>
                    <input type="hidden" v-model="loginType" name="loginType"/>
                    <button type="button" class="btn btn-primary" @click="smsLogin">登录</button>
                </form>
            </div>
            <div v-show="qrCodeVisible" class="sso-form">
                <form id="qrCodeLogin" method="post">
                    <input type="hidden" v-model="qrCodeName" name="username"/>
                    <input type="hidden" v-model="qrCodeSecret" name="password"/>
                    <input type="hidden" v-model="loginType" name="loginType"/>
                </form>
                <div class="col-md-12 col-md-offset-1">
                    <img v-if="allowScan" id="qrCode" :src="qrCode" width="200" height="200"/>
                    <img v-if="!allowScan" id="qrCodeCancel" src="/img/qrcode_invalid.png" width="200" height="200"
                         @click="refreshQrCode"/>
                </div>
                <div class="col-md-12 col-md-offset-3">
                    <label>{{qrCodeDesc}}</label>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    let vm = new Vue({
        el: '#ssoLogin',
        data: {
            userPasswordVisible: false,
            phoneSmsCodeVisible: false,
            qrCodeVisible: false,
            phone: '',
            username: '',
            password: '',
            loginType: '',
            errorVisible: false,
            errorMsg: '',
            rememberMe: false,
            codeValue: '',
            codeButton: '验证码',
            codeDisabled: false,
            qrCode: '',
            timer: '',
            qrCodeDesc: '打开小程序扫码',
            qrCodeName: '',
            qrCodeSecret: '',
            allowScan: true
        },
        methods: {
            login() {
                $('#login').submit();
            },
            smsLogin() {
                $('#smsLogin').submit();
            },
            sendMsg() {
                $.ajax({
                    url: "/sendMsg",
                    type: "POST",
                    data: "phone=" + this.phone,
                    dataType: "json",
                    success: function (result) {
                        if (result.success) {
                            //测试环境将验证码返回，生成环境删除此方法
                            vm.codeValue = result.result;
                            vm.resetCode();
                        } else {
                            vm.showError(result.msg);
                        }
                    }
                });
            },
            buildQRCode() {
                $.ajax({
                    url: "/qrCodeLogin/build",
                    type: "get",
                    success: function (result) {
                        if (result != null) {
                            vm.qrCode = result.img;
                            vm.allowScan = true;
                            vm.qrCodeDesc = "打开小程序扫码";
                            vm.checkQRCode(300, result.code);
                        }
                    }
                });
            },
            checkQRCode(second, code) {
                clearInterval(vm.timer);
                vm.timer = setInterval(function () {
                    second -= 2;
                    if (second > 0) {
                        vm.waitPhoneScan(vm.timer, code);
                    } else {
                        vm.InvalidQRCode(vm.timer);
                    }
                }, 2000);
            },
            waitPhoneScan(timer, code) {
                $.ajax({
                    url: "/qrCodeLogin/check?code=" + code,
                    dataType: "json",
                    type: "get",
                    success: function (data) {
                        if (data == null || data.status == null) {
                            vm.InvalidQRCode(timer);
                            return;
                        }
                        switch (data.status) {
                            case '1':
                                vm.qrCode = "/img/qrcode_ok.png";
                                vm.qrCodeDesc = "手机确认登录";
                                vm.qrCodeName = data.account;
                                break;
                            case '2':
                                clearInterval(timer);
                                vm.qrCodeSecret = code + "," + data.secret;
                                break;
                            case '3':
                                vm.InvalidQRCode(timer);
                                break;
                            default:
                                break;
                        }
                    }
                });
            },
            InvalidQRCode(timer) {
                vm.qrCodeDesc = "点击图片刷新";
                vm.allowScan = false;
                clearInterval(timer);
            },
            showUserPassword() {
                this.userPasswordVisible = true;
                this.phoneSmsCodeVisible = false;
                this.qrCodeVisible = false;
                this.loginType = "user_password";
                clearInterval(this.timer)
                this.clearError();
            },
            showPhoneSmsCode() {
                this.phoneSmsCodeVisible = true;
                this.userPasswordVisible = false;
                this.qrCodeVisible = false;
                this.loginType = "phone_smsCode";
                clearInterval(this.timer)
                this.clearError();
            },
            showQrCode() {
                this.qrCodeVisible = true;
                this.phoneSmsCodeVisible = false;
                this.userPasswordVisible = false;
                this.loginType = "qr_code";
                this.buildQRCode();
                this.clearError();
            },
            refreshQrCode() {
                this.buildQRCode();
            },
            clearError() {
                this.errorMsg = '';
                this.errorVisible = false;
            },
            showError(error) {
                if (error != null && error != '') {
                    this.errorMsg = error;
                } else {
                    this.errorMsg = $('#errorMsg').val();
                }
                if (this.errorMsg !== '' && this.errorMsg !== undefined) {
                    this.errorVisible = true;
                }
            },
            initLoginData() {
                this.loginType = $('#loginType').val();
                switch (this.loginType) {
                    case "phone_smsCode":
                        this.phone = $('#username').val();
                        this.showPhoneSmsCode();
                        break;
                    case "qr_code":
                        this.showQrCode();
                        break;
                    default:
                        this.username = $('#username').val();
                        this.showUserPassword();
                        break;
                }
            },
            resetCode() {
                let second = 60;
                let codeTime = setInterval(function () {
                    second -= 1;
                    if (second > 0) {
                        vm.codeButton = second;
                        vm.codeDisabled = true;
                    } else {
                        clearInterval(codeTime);
                        vm.codeButton = "验证码";
                        vm.codeDisabled = false;
                    }
                }, 1000);
            }
        },
        created: function () {
        },
        mounted: function () {
            this.initLoginData();
            this.showError();
        }
    });
    vm.$watch('qrCodeSecret', function (nval, oval) {
        $('#qrCodeLogin').submit();
    });
</script>
</body>
</html>